<template>
  <div class="village_main">
    <head-top goBack="true" head-title="通知公告"></head-top>
    <div class="village_content" v-if="statusNum === 1">
      <mt-cell :title="item.title" :label="item.author" :value="item.created_at*1000 | dateFmt(('YYYY-MM-DD'))" is-link
               :to="'/home/VillageDetail/'+item.id" v-for="(item,index) in detail" :key="index"></mt-cell>
    </div>
    <div class="default2" v-if="statusNum === 0">
      <p>对不起您不是该小区业主，或者去我的房申请进行审核</p>
    </div>
    <div class="default" v-show="!detail.length && !noResult && statusNum!==0">
      <p>数据加载中</p>
    </div>
    <div class="default1" v-show="noResult && statusNum === 1">
      <p>抱歉！暂无数据</p>
    </div>
    <popup-view :isShow="showPopup" :desc="desc" @goCancel="btnCancel" @goIdent="btnIndent"></popup-view>
  </div>
</template>
<style lang="scss">
  @import "../../common/sass/mixin.scss";

  .village_main {
    padding-top: 40px;
    .mint-cell-text {
      @include ellipsis(1);
      line-height: 20px;
    }
    .mint-cell-label {
      @include ellipsis(1);
      line-height: 18px;
      color: #0078de;
    }
    .mint-cell {
      min-height: 55px;
    }
    .mint-cell-wrapper {
      background-size: 100% 1px;
    }
    .mint-cell-value.is-link {
      margin-right: 10px;
      font-size: 12px;
    }
  }

  .default {
    width: 100%;
    flex: 1;
    display: inline-flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    padding-top: 100px;
    justify-content: center;
    align-items: center;
    background: url("../../assets/loading.gif") no-repeat;
    background-size: 40px 40px;
    background-position: center;
    padding-bottom: 100px;
    p {
      font-size: 15px;
      text-align: center;
      color: #666;
      margin-top: 100px;
    }
  }

  .default1 {
    width: 100%;
    flex: 1;
    display: inline-flex;
    padding-top: 100px;
    justify-content: center;
    align-items: center;
    background: url("../../assets/default.png") no-repeat;
    background-size: 100px 100px;
    background-position: center;
    padding-bottom: 140px;
    p {
      font-size: 15px;
      color: #0b7ad9;
      margin-top: 180px;
    }
  }

  .default2 {
    width: 100%;
    flex: 1;
    display: inline-flex;
    padding: 200px 0;
    p {
      text-align: center;
      font-size: 16px;
      line-height: 26px;
    }
  }
</style>
<script>
  import headTop from '../header/Header.vue'
  import commonUrl from '../../common/js/commonUrl.js'
  import {getMangers} from '../../api/management'
  import {loadPhoneName} from '../../common/js/cache.js'
  import popupView from '../common/popupView.vue'

  export default {
    name: 'VillageNotice',
    data() {
      return {
        detail1: [],
        noResult: false,
        statusNum: '',
        pName: loadPhoneName(),
        showPopup: false,
        desc: '请先房屋认证'
      }
    },
    components: {
      headTop,
      popupView
    },
    created() {
      if (this.pName === undefined) {
        this.showPopup = true
      } else {
        if ((loadPhoneName().phone === '0' || loadPhoneName().phone === '') || loadPhoneName().name === '') {
          this.showPopup = true
        } else {
          this._getMangers()
        }
      }
      // this._getMangers()
    },
    // 设置缓存从哪个页面返回
    // beforeRouteEnter: (to, from, next) => {
    //   if (from.name === 'VillageDetail') {
    //     to.meta.isBack = true
    //   }
    //   next()
    // },
    // activated() {
    //   if (!this.$route.meta.isBack) {
    //     this.getVillageList()
    //   }
    //   this.$route.meta.isBack = false
    // },
    methods: {
      _getMangers() {
        getMangers().then(res => {
          if (res.code === 200) {
            this.statusNum = res.data.status
            // console.log(this.statusNum)
            if (this.statusNum !== 0) {
              this.getVillageList()
            } else {
              this.showPopup = true
            }
          }
        })
      },
      getVillageList() {
        this.noResult = false
        const url = commonUrl.apihost + 'index.php/home/article/announce/?areas_id=' + this.$route.params.id
        this.$http.get(url).then(res => {
          if (res.status === 200) {
            this.detail1 = res.data.data
          }
          if (this.detail1.length === 0) {
            this.noResult = true
          } else {
            this.noResult = false
          }
        })
      },
      // 弹窗取消按钮
      btnCancel() {
        this.showPopup = false
      },
      // 弹窗去认证按钮
      btnIndent() {
        this.$router.push('/my/HouseConfirm')
      }
    },
    computed: {
      detail() {
        return this.detail1.reverse()
      }
    }
  }
</script>
